import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  // 设置基础路径
  base: './',
  // 设置环境变量
  define: {
    'process.env': {},
  },
  // 优化依赖
  optimizeDeps: {
    include: ['axios', 'lodash'],
    exclude: ['vue-demi'],
  },
  // 路径别名
  resolve: {
    alias: {
      // 设置别名，方便引用
      '@': path.resolve(__dirname, 'src'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@/styles/base.scss";
          @import "@/styles/theme.scss";
          @import "@/styles/variables.scss";
        `,
      },
    },
    // 配置css模块
    modules: {
      localsConvention: 'camelCase', // 驼峰命名
    },
  },
  // 插件
  plugins: [vue()],
  // 开发服务器
  server: {
    port: 3000, // 开发服务器端口
    host: '0.0.0.0', // 监听所有地址
    strictPort: true, // 端口被占用时，是否直接退出
    hmr: {
      overlay: false, // 禁用错误遮罩
    },
    cors: true, // 允许跨域
    open: true, // 是否自动在浏览器中打开
    proxy: {
      // 配置开发服务器代理
      '/api': {
        target: 'http://localhost:8080', // 目标地址
        // 是否跨域
        changeOrigin: true,
        // 重写地址
        rewrite: (path) => path.replace(/^\/api/, ''), //
      },
    },
  },
  // 构建配置
  build: {
    outDir: 'dist', // 构建输出目录
    assetsDir: 'assets', // 静态资源目录
    manifest: true, // 生成 manifest.json 文件
    rollupOptions: {
      // 自定义 rollup 配置
      external: ['vue'],
      // 输出配置
      output: {
        // 全局变量
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
  // esbuild 配置
  esbuild: {
    pure: ['console.log'], // 移除 console.log
    drop: ['debugger'], // 移除 debugger
    minifyWhitespace: true, // 移除空格
    minifyIdentifiers: true, // 移除标识符
    minifySyntax: true, // 移除语法
    treeShaking: true, // 移除未使用的代码
    // banner: {
    //   js: '// hello world',
    // }, // 添加注释
  },
})
